<template>
    <a-row>
        <a-col :span="5">
            <a-card class="cardImp" :bordered="false">
                <a-input v-model:value="searchValue" style="margin-bottom: 8px" placeholder="搜索" />
                <a-tree v-if="treeData.length > 0" v-model:expandedKeys="defaultExpandedKeys" :tree-data="treeData"
                    :field-names="treeFieldNames" @select="treeSelect">
                </a-tree>
                <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
            </a-card>
        </a-col>
        <a-col :span="19">
            <a-card :bordered="false">
                <s-table ref="table" v-if="treeData.length > 0" :showPagination="false" :columns="columns"
                    :data="loadData" :expand-row-by-click="true" bordered :alert="options.alert.show"
                    :row-key="(record) => record.id">
                    <!-- <template #operator class="table-operator">
                        <a-row :gutter="24">
                            <a-col :span="6">
                                <a-button danger @click="submit()">确定</a-button>
                            </a-col>
                        </a-row>
                    </template> -->
                    <template #bodyCell="{ column, record }">
                        <!-- <template v-if="column.dataIndex === 'avatar'">
                            <a-avatar :src="record.avatar" style="margin-bottom: -5px; margin-top: -5px" />
                        </template>
<template v-if="column.dataIndex === 'gender'">
                            {{ $TOOL.dictTypeData('GENDER', record.gender) }}
                        </template>
<template v-if="column.dataIndex === 'userStatus'">
                            <a-switch :loading="loading" :checked="record.userStatus === 'ENABLE'"
                                @change="editStatus(record)" v-if="hasPerm('bizUserUpdataStatus')" />
                            <span v-else>{{ $TOOL.dictTypeData('COMMON_STATUS', record.userStatus) }}</span>
                        </template> -->
                        <template v-if="column.dataIndex === 'mmr'">
                            {{ delRowKeys.find(v => v.id === record.id) ? '是' : '否' }}
                        </template>
                        <template v-if="column.dataIndex === 'action'">
                            <a @click="submit1(record)">{{ delRowKeys.find(v => v.id === record.id) ? '取消' : '确定'
                                }}</a>
                        </template>
                    </template>
                </s-table>
            </a-card>
        </a-col>
    </a-row>
</template>
<script setup name="defPer">
import { message, Empty } from 'ant-design-vue'
import { getCurrentInstance } from 'vue'
import appinfoflowApi from '@/api/biz/appinfoflowApi'

const columns = [

    {
        title: '姓名',
        dataIndex: 'name'
    },
    {
        title: '账号',
        dataIndex: 'account',
        ellipsis: true
    },
    {
        title: '组织',
        dataIndex: 'orgName',
        ellipsis: true
    },
    {
        title: '默认人',
        dataIndex: 'mmr',
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        width: '240px'
    }
]
// if (hasPerm(['bizUserEdit', 'bizUserGrantRole', 'bizUserPwdReset', 'bizUserDelete'])) {
//     columns.push({
//         title: '操作',
//         dataIndex: 'action',
//         align: 'center',
//         width: '240px'
//     })
// }
const { proxy } = getCurrentInstance()
const statusData = proxy.$TOOL.dictTypeList('COMMON_STATUS')
const searchFormRef = ref()
let defaultExpandedKeys = ref([])
let searchFormState = reactive({})
const table = ref(null)
const treeData = ref([])
let selectedRowKeys = ref([])
let delRowKeys = ref([])
const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
let form = ref(null)
let RoleSelector = ref()
let current = []
let RoleSelectorPlus = ref()
const selectedRecord = ref({})
const loading = ref(false)
onMounted(() => {
    getData()
})
const getData = async () => {
    treeData.value = await appinfoflowApi.getRoleList()
    current = treeData.value
    // searchFormState.id = treeData.value[1].id
    // loadData.value = await appinfoflowApi.roleUserList(treeData.value[0].id)
}
// 表格查询 返回 Promise 对象
const loadData = () => {
    appinfoflowApi.findUserIdAllByRoleIdDefault(searchFormState).then(res => {
        delRowKeys.value = res
    })

    return appinfoflowApi.roleUserList(searchFormState).then((res) => {
        return res
    })
}
// 列表选择配置
const options = {
    alert: {
        show: false,
        clear: () => {
            selectedRowKeys = ref([])
        }
    },
    rowSelection: {
        onChange: (selectedRowKey, selectedRows) => {
            selectedRowKeys.value = selectedRowKey
            console.log(selectedRowKeys.value)
        }
    }
}
// 点击树查询
const treeSelect = (selectedKeys) => {
    if (selectedKeys.length > 0) {
        searchFormState.id = selectedKeys.toString()
    } else {
        delete searchFormState.id
    }
    table.value.refresh(true)
}
// 修改状态
const editStatus = (record) => {
    loading.value = true
    if (record.userStatus === 'ENABLE') {
        bizUserApi.userDisableUser(record).then(() => {
            table.value.refresh()
        })
            .finally(() => {
                loading.value = false
            })
    } else {
        bizUserApi.userEnableUser(record).then(() => {
            table.value.refresh()
        })
            .finally(() => {
                loading.value = false
            })
    }
}
// 删除人员
const removeUser = (record) => {
    let params = [
        {
            id: record.id
        }
    ]
    bizUserApi.userDelete(params).then(() => {
        table.value.refresh()
    })
}
// 批量删除
const submit = async () => {
    // if (selectedRowKeys.value.length < 1) {
    //     message.warning('请选择一条或多条数据')
    //     return
    // }
    const delparams = {
        roleId: searchFormState.id,
        userList: delRowKeys.value.map(v => v.id)
    }
    const addparams = {
        roleId: searchFormState.id,
        userList: selectedRowKeys.value
    }
    if (delRowKeys.value.length > 0) await appinfoflowApi.removeDefaultUser(delparams)
    if (selectedRowKeys.value.length > 0) await appinfoflowApi.addDefaultUser(addparams)
    // table.value.clearRefreshSelected()

}
const submit1 = async (record) => {
    const bool = delRowKeys.value.find(v => v.id === record.id)
    const params = {
        roleId: searchFormState.id,
        userList: [record.id]
    }
    if (bool) {
        await appinfoflowApi.removeDefaultUser(params)
    } else {
        await appinfoflowApi.addDefaultUser(params)
    }
    appinfoflowApi.findUserIdAllByRoleIdDefault(searchFormState).then(res => {
        delRowKeys.value = res
    })
}
// 打开角色选择器
const selectRole = (record) => {
    selectedRecord.value = record
    // 查询到已有角色，并转为ids的格式，给角色选择器
    const param = {
        id: record.id
    }
    bizUserApi.userOwnRole(param).then((data) => {
        RoleSelectorPlus.value.showRolePlusModal(data)
    })
}
// 角色选择回调
const roleBack = (value) => {
    let params = {
        id: selectedRecord.value.id,
        roleIdList: []
    }
    if (value.length > 0) {
        value.forEach((item) => {
            params.roleIdList.push(item.id)
        })
    }
    bizUserApi.grantRole(params).then(() => {
    })
}
// 重置人员密码
const resetPassword = (record) => {
    bizUserApi.userResetPassword(record).then(() => {
    })
}

const searchValue = ref('');
watch(searchValue, value => {
    if (value) {
        const expanded = current.filter(item => item.name.indexOf(value) > -1)
        if (expanded.length > 0) {
            treeData.value = expanded
        }
    } else {
        treeData.value = current
    }

});
</script>

<style scoped>
.cardImp {
    margin-right: 10px;
    height: calc(100vh - 100px);
    overflow-y: scroll;
}

.ant-form-item {
    margin-bottom: 0 !important;
}

.primaryAdd {
    margin-right: 10px;
}

.snowy-table-avatar {
    margin-top: -10px;
    margin-bottom: -10px;
}

.snowy-buttom-left {
    margin-left: 8px;
}
</style>
